﻿@{
    ViewBag.Title = "ListOrders";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

@section scripts
{
    <script type="text/javascript" src="~/Scripts/App/Admin/order_list.js"></script>
}


<div class="content-header">
    <div class="header-section">
        <h1>
            <i class="gi gi-certificate"></i>Quản Lý Đơn Đặt Hàng<br>
            <small>Danh Sách</small>
        </h1>
    </div>
</div>
<ul class="breadcrumb breadcrumb-top">
    <li><a href="../Admin/index"><i class="fa fa-home"></i></a></li>
    <li><a href="../Admin/ListOrder">Đơn đặt hàng</a></li>
    <li><a href="../Admin/ListOrder">Quản Lý</a></li>
</ul>

<div class="tab-content">
    <div id="listorder-div" class="tab-pane fade in active animation-slideRight">
        <div class="container-fluid">
            <div class="row">
                <div class="dataTables_filter" id="example-datatable_filter">
                    <div class="input-group">
                        <input type="text" data-bind="instantValue: SearchString, event: { keypress: $root.EnterSendMsg }" aria-controls="example-datatable" class="form-control" placeholder="Tìm Kiếm">
                        <span class="input-group-addon" style="cursor: pointer" data-bind="click: $root.SendMsg">
                            <i class="fa fa-search"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <br />
        <div class="container-fluid">
            <div class="row">
                <div class="pull-right col-md-2" style="margin-left: 10px">
                    <select data-bind="options: dropdownItems, optionsText: 'name', optionsValue: 'id', value: selectedChoice, optionsCaption: 'Choose..', event: { change: selectionChanged }"
                        id="example-select" name="example-select" class="form-control" size="1">
                    </select>

                </div>
                <div class="dataTables_filter" id="example-datatable_filter">
                    <div class="input-group">
                        <input type="text" data-bind="instantValue: SearchDate, event: { keypress: $root.EnterSendMsg }" id="example-datepicker2" aria-controls="example-datatable" name="example-datepicker2" class="form-control input-datepicker" data-date-format="yyyy-mm-dd" placeholder="yy-mm-dd">
                        @*<input type="text" data-bind="instantValue: SearchString, event: { keypress: $root.EnterSendMsg }" aria-controls="example-datatable" class="form-control" placeholder="Tìm Kiếm">*@
                        <span class="input-group-addon" style="cursor: pointer" data-bind="click: $root.SendMsgDate">
                            <i class="fa fa-search"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <br />
        <div class="container-fluid">
            <div class="row" data-bind="foreach: OrderLists, visible: Loaded">
                <div class="col-sm-5 col-md-4">
                    <div class="widget">
                        <div class="widget-simple">
                            <a href="javascript:void(0)" class="widget-icon pull-left animation-fadeIn themed-background">
                                <img width="32" height="32" data-bind="attr: { src: ImgUrl }" />
                            </a>
                            <h5 class="widget-content text-right animation-hatch">
                                <p><small><a href="#" class="" data-bind="text: UserName"></a></small></p>
                                <p><small><a href="#" class="" data-bind="text: DateExchangeDisplay"></a></small></p>
                            </h5>
                            <h4 class="widget-content text-right animation-hatch">
                                <span class="pull-right" style="margin-left: 2px;"><a href="#godetail-div" data-bind="click: $root.goDetail" data-toggle="tab" class="btn btn-xs btn-default">Chi tiết</a></span>
                                <span class="pull-right" style="margin-left: 2px;"><a href="#" data-bind="click: $root.doCancel, visible: Status == 0" class="btn btn-xs btn-danger">Hủy bỏ</a></span>
                                <span class="pull-right" style="margin-left: 2px;"><a data-bind="click: $root.doAprroved, visible: Status == 0" class="btn btn-xs btn-primary">Đồng ý</a></span>
                            </h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-actions form-group">
                <div class="col-md-4 pull-right">
                    <ul class="pager">
                        <li class="prev" data-bind="css: { disabled: IsPrevious() === false }">
                            <a href="#" data-bind="    click: $root.doPrevious">← Trang Trước</a>
                        </li>
                        <li class="next" data-bind="css: { disabled: IsNext() === false }">
                            <a href="#" data-bind="    click: $root.doNext">Trang Sau →</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row" data-bind="hidden: Loaded"><i class="fa fa-asterisk fa-spin fa-4x"></i></div>
    </div>


    <div id="godetail-div" class="row block tab-pane animation-slideRight fade">
        <div class="block-title">
            <h2><strong>Đơn đặt hàng</strong>chi tiết</h2>
        </div>

        <div class="col-lg-4">
            <div class="block" data-bind="with: Member">
                <div class="block-title">
                    <div class="block-options pull-right">
                        <a href="javascript:void(0)" class="btn btn-sm btn-alt btn-danger enable-tooltip" data-toggle="block-hide" title="" data-original-title="Remove"></a>
                    </div>
                    <h2 data-bind="text: UserName"><i class="fa fa-pencil"></i></h2>
                </div>
                <form action="page_ready_contacts.php" method="post" class="form-horizontal form-bordered" onsubmit="return false;">
                    <div class="form-group">
                        <label class="col-xs-3 control-label" for="edit-contact-name">Name</label>
                        <div class="col-xs-9">
                            <input type="text" id="edit-contact-name" name="edit-contact-name" class="form-control" data-bind="value: FirstName + ' ' + LastName" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-3 control-label" for="edit-contact-email">Email</label>
                        <div class="col-xs-9">
                            <input type="email" id="edit-contact-email" name="edit-contact-email" class="form-control" data-bind="value: Email" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-3 control-label" for="edit-contact-phone">Point</label>
                        <div class="col-xs-9">
                            <input type="text" id="edit-contact-phone" name="edit-contact-phone" class="form-control" data-bind="value: Point" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-3 control-label" for="edit-contact-mobile">CMND</label>
                        <div class="col-xs-9">
                            <input type="text" id="edit-contact-mobile" name="edit-contact-mobile" class="form-control" data-bind="value: CMND" disabled>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-lg-8">
            <table id="example-datatable" class="table table-vcenter table-condensed table-bordered dataTable" aria-describedby="example-datatable_info">
                <thead>
                    <tr role="row">
                        <th class="text-center sorting_asc" role="columnheader" tabindex="0" aria-controls="example-datatable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="ID: activate to sort column descending" style="width: 58px;">ExchangeLog Id</th>
                        <th class="text-center sorting_disabled" role="columnheader" rowspan="1" colspan="1" aria-label="" style="width: 131px;">Product Img</th>
                        <th class="sorting" role="columnheader" tabindex="0" aria-controls="example-datatable" rowspan="1" colspan="1" aria-label="Client: activate to sort column ascending" style="width: 116px;">Product Name</th>
                        <th class="sorting" role="columnheader" tabindex="0" aria-controls="example-datatable" rowspan="1" colspan="1" aria-label="Email: activate to sort column ascending" style="width: 267px;">Score</th>
                        <th class="sorting" role="columnheader" tabindex="0" aria-controls="example-datatable" rowspan="1" colspan="1" aria-label="Subscription: activate to sort column ascending" style="width: 230px;">Quantity</th>
                    </tr>
                </thead>

                <tbody role="alert" aria-live="polite" aria-relevant="all" data-bind="foreach: OrderDetails">
                    <tr class="odd">
                        <td class="text-center  sorting_1" data-bind="text: ExLogId">1</td>
                        <td class="text-center ">
                            <img data-bind="attr: { src: ProductImg }" height="100px" width="100px" alt="avatar" class="img-circle"></td>
                        <td class=" "><a href="javascript:void(0)" data-bind="text: Name"></a></td>
                        <td class=" " data-bind="text: Score"></td>
                        <td class=" " data-bind="text: QuantityToOrder"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
